<head>
    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>
    <script language="JavaScript" src="/fusion_charts/maps/JSClass/FusionMaps.js">
    </script>
    <script type="text/javascript" src="/fusion_charts/Charts/FusionCharts.js">
    </script>
    <script type="text/javascript">
        function detail_international(url){
            $('#internationalframe').attr({
                'src': url,
                'height': 400
            })
        }
    </script>
    <script type="text/javascript">
                              google.load('visualization', '1', {packages:['table']});
                			  google.load('visualization', '1', {'packages': ['geomap']});
                			  
                			  google.setOnLoadCallback(drawMap);
                              google.setOnLoadCallback(drawTable);
                              function drawTable() {
                                var data = new google.visualization.DataTable();
                                data.addColumn('string', 'Country Code');
                        		data.addColumn('string', 'ISO');
                        		data.addColumn('string', 'Country Name');
                        		data.addColumn('number', 'Max per 5min');
                                data.addColumn('number', 'Total # of Records');
                                data.addRows(<%= @international_count_per_country_number.size %>);
                        		<% i=0 %>
                                <%for item in @international_count_per_country_number %>
                        			<% key=item[0]; value=item[1]; %>
                        			<% link = url_for :action=>'detail', :id=>key, :p=>params[:p], :from=>params[:from], :to=>params[:to], :iso=>value["iso_country_code"] %>
                                	data.setCell(<%=i%>, 0, '<%= raw("<a href=\"#\" onclick=\"detail_international(\"#{link}\");;\">#{key}</a>") %>');
                                	data.setCell(<%=i%>, 1, '<%= value["iso_country_code"] %>');
                                	data.setCell(<%=i%>, 2, '<%= country_name(value["iso_country_code"]) %>');
                        			data.setCell(<%=i%>, 3, <%= value["max"] %>);
                        			data.setCell(<%=i%>, 4, <%= value["sum_calls"] %>);
                        			<% i+=1 %>
                                <%end%>
                                
                        
                                var table = new google.visualization.Table(document.getElementById('google_table_div'));
                                table.draw(data, {showRowNumber: false, width: '500px', allowHtml: true});
                              }
                            
                    
                   
                
                    function drawMap() {
                      var data = new google.visualization.DataTable();
                      data.addColumn('string', 'ISO');
                      data.addColumn('number', 'Total # of Records');
        			  data.addRows(<%= @international_count_per_country_number.size %>);
                      <% i=0 %>
        			  <% for item in @international_count_per_country_number %>
        			  <% key=item[0]; value=item[1]; %>
        			  	<% if value["iso_country_code"] != "UNKNOWN" %>
        			  		data.setValue(<%=i%>, 0, '<%= value["iso_country_code"] %>');
                      		data.setValue(<%=i%>, 1, <%= value["sum_calls"] %>);
        				<% end %>
        				<% i+=1 %>
        			  <% end %>       
                      var options = {};
                      options['dataMode'] = 'regions';
                
                      var container = document.getElementById('map_canvas');
                      var geomap = new google.visualization.GeoMap(container);
                      geomap.draw(data, options);
                  };
                  
            
    </script>
</head>
</div>
<br/>
<table border="0" cellspacing="0" style="width:100%" cellpadding="3" align="left">
    <tr>
        <td>
            <!--
            --
            --
            -- map for the international
            --
            --
            -->
            <div id='map_canvas' styke="height: 400px;">
        </td>
        <td>
            <!--
            --
            --
            -- Bar Chart for the international
            --
            --
            -->
            <div id="international-view-block">
                <!--
                --
                --
                -- Frame for the detail of each country
                --
                --
                -->
                <% init_link = url_for(:action=>'src_phone_international', :id=>"dummy", :p=>params[:p], :from=>params[:from], :to=>params[:to]) %>
                <iframe style="border:none;" frameborder="0" height="400px" width="<%= @international_count_per_country_number.size * 30 %>px" id="internationalframe" src="<%=init_link%>">
                </iframe>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <!--
            --
            --
            -- Tabular view
            --
            --
            -->
            <div id="google_table_div">
            </div>
        </td>
        <td>
            <table class="inner_table" style="width:500px;">
                <tr>
                    <th>
                        Country Number
                    </th>
                    <th>
                        Max per 5min
                    </th>
                    <th>
                        Total Calls
                    </th>
                </tr>
                <% @international_count_per_country_number.each do |k| %>
                <tr>
                    <% key = k[0]; value = k[1] # key: identifying number(e.g. country_code) , value: sum_calls, and country_code %>
                    <td>
                        <% link = url_for :action=>'src_phone_detail', :id=>key, :p=>params[:p], :from=>params[:from], :to=>params[:to], :iso=>value["iso_country_code"] %>
                        <%= link_to_function "%s (%s - %s)" % [key, value["iso_country_code"], country_name(value["iso_country_code"])], "detail_international('#{link}');" %>
                    </td>
                    <td>
                        <%= value["max"] %>
                    </td>
                    <td>
                        <%= value["sum_calls"] %>
                    </td>
                </tr>
                <% end %>
            </table>
        </td>
    </tr>
</table>
<br/>
